<template>
    <view class="content">
        <view class="u-p-b-20">
            <u-search placeholder="输入发货方或收货方名称" v-model="keyword" @search="search" :show-action="false" bg-color="#fff" height="80"></u-search>
        </view>
        
        <view class="box" v-for="(item, index) in list" :key="index" @click="$gTo(`/pages/my-create/details?id=${item.id}`)">
            <view class="top">
                <view class="item u-flex-1">
                    <view class="left">订单编号</view>
                    <view class="right">{{item.out_trade_no}}</view>
                </view>
                <view class="o-sta3" v-if="item.pay_status==2">已结算</view>
                <view class="o-sta3" v-if="item.pay_status==1">未结算</view>
                <view class="o-sta1" v-if="item.order_type==1">零担</view>
                <view class="o-sta1" v-if="item.order_type==2">包车</view>
            </view>
            <view class="item">
                <view class="left">运输线路</view>
                <view class="right">{{item.line}}</view>
            </view>
            <view class="item">
                <view class="left">始发地</view>
                <view class="right">{{item.origin}}</view>
            </view>
            <view class="item">
                <view class="left">目的地</view>
                <view class="right">{{item.destination}}</view>
            </view>
            <view class="item">
                <view class="left">装车地点</view>
                <view class="right">{{item.loading_site}}</view>
            </view>
            <view class="item">
                <view class="left">发车时间</view>
                <view class="right">2023-11-22 16:00</view>
            </view>
            <view class="item">
                <view class="left">发货方</view>
                <view class="right">{{item.shipper}}</view>
            </view>
            <view class="item">
                <view class="left">联系人</view>
                <view class="right">{{item.shipper_contact}}</view>
            </view>
            <view class="item">
                <view class="left">联系方式</view>
                <view class="right">{{item.shipper_phone}}</view>
            </view>
            <view class="item">
                <view class="left">运费</view>
                <view class="right">￥{{item.order_amount}}</view>
            </view>
            <view class="item" v-if="item.cancel_reason">
                <view class="left">取消原因</view>
                <view class="right">{{item.cancel_reason}}</view>
            </view>
            
            
            <view class="btns">
                <view class="btn2" v-if="item.cancel_status>0">订单已取消</view>
                <view class="btn2" v-if="item.cancel_status==0" @click.stop="cancel(item)">取消订单</view>
                <view class="btn1" v-if="$getSync('identity') == 4" @click.stop="again(item)">再来一单</view>
            </view>
        </view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
        
        <!-- 取消原因 -->
        <u-popup mode="bottom" v-model="show" :closeable="true" border-radius="20">
            <view class="popup">
                <view class="pop-title">取消原因</view>
                <template v-if="isShowInput">
                    <textarea v-model="content" placeholder="请输入取消原因内容" :auto-height="true" class="t-inp"></textarea>
                </template>
                <view class="pop-tip">提示: 取消订单由发货管理员根据现场装车情况审核后反馈您</view>
                <view class="pop-btn" @click="doRate">提交</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword: '',
                show: false,
                isShowInput: false,//输入框 延迟显示
                content: '',
                page:1,
                status: 'loadmore', //加载前值
                limit:10,
                list:[],
                orderD:''
                
            };
        },
        onLoad() {
			if(this.$getSync('identity') == 5){
				uni.setNavigationBarTitle({
					title:'下单记录'
				})
			}
            this.getList()
        },
        
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        
        methods: {
            // 取消订单
            cancel(item){
                
                this.show = true;
                this.content = ""
                this.orderD = item;
                setTimeout(() => {
                    this.isShowInput = true;
                });
            },
            
            // 再来一单
            again(item) {
                
                uni.showLoading({
                    title: '跳转中',
                    mask: true
                });
                
                this.$setSync('order_id_again',item)
                
                setTimeout(()=>{
                    uni.hideLoading();
                    this.$sTo(`/pages/tabbar/tab-4`)
                },1000)
                
            },
            search(){
                this.page=1;
                this.status = 'loadmore'; //加载前值
                this.limit = 10;
                this.list=[];
                this.getList()
            },
            //获取列表
            doRate(){
                this.$ajax('cancel_orders', {
                    user_token:this.$getTokens(),
                    order_id:this.orderD.id,
                    cancel_reason:this.content
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$alert('取消成功');
                        
                        
                        this.show = false;
                        this.content = "";
                        setTimeout(() => {
                            this.isShowInput = false;
                        });
                        
                        this.page=1;
                        this.status = 'loadmore'; //加载前值
                        this.limit = 10;
                        this.list=[];
                        this.getList()
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
            
            //获取列表
            getList(){
                
                if (this.status == 'nomore') return;
                this.status == 'loading';
                
                this.$ajax('select_orders', {
                    user_token:this.$getTokens(),
                    shipper:this.keyword,//1找车 2车辆审核 3拒绝接单
                    page:this.page,
                    limit:this.limit
                }).then(ret => {
                	if (ret.success == 1000) {
						if (ret.detail && ret.detail.orders && ret.detail.orders.length > 0) {
							this.list = this.list.concat(ret.detail.orders);
							this.page++;
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
                	} else {
                		this.$toast(ret.msg);
                	}
                    
                });
            },
            
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #eef1f6;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        background-color: #fff;
        border-radius: 15rpx;
        padding: 40rpx 30rpx 30rpx;
        margin: 0 0 20rpx 0;
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .left{
        width: 140rpx;
        color: #656565;
    }
    .right{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .o-sta{
        font-size: 24rpx;
        color: #ff602c;
        padding: 4rpx 10rpx;
        border: 2rpx solid #ff602c;
        border-radius: 5rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
        box-sizing: border-box;
    }
    .o-sta3{
        font-size: 24rpx;
        color: #000;
        padding: 4rpx 10rpx;
        border: 2rpx solid #a7a7a7;
        border-radius: 5rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
        box-sizing: border-box;
    }
    .o-sta1{
        font-size: 24rpx;
        color: #ff602c;
        padding: 7rpx 15rpx;
        background-color: #fff1ec;
        border-radius: 10rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
    }
    .o-sta2{
        font-size: 24rpx;
        color: #0075ff;
        padding: 7rpx 15rpx;
        background-color: #ebf4fe;
        border-radius: 10rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
    }
    .price{
        font-size: 26rpx;
        color: #ff602c;
    }
    .price-num{
        font-size: 38rpx;
    }
    .btns{
        padding-top: 10rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
    }
    .btn1{
        padding: 15rpx 25rpx;
        background-color: #004580;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn2{
        padding: 15rpx 25rpx;
        background-color: #9aafc2;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn3{
        padding: 15rpx 25rpx;
        background-color: #fff;
        border-radius: 50rpx;
        margin-left: 20rpx;
        color: #004580;
        border: 2rpx solid #004580;
        box-sizing: border-box;
    }
    
    
    .popup{
        padding: 30rpx;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding-bottom: 40rpx;
    }
    .pop-tip{
        font-size: 24rpx;
        color: #fe6a00;
        padding-top: 20rpx;
        padding-bottom: 50rpx;
    }
    .t-inp{
        padding: 20rpx;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        font-size: 26rpx;
        width: 100%;
        min-height: 220rpx;
    }
    .pop-btn{
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        padding: 20rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }
    


</style>
